<template>
  <div class="movie">
    <van-tabs v-model="active" @click="handleClick">
      <template #nav-left>
        <van-icon name="location-o" />
      </template>
      <template #nav-right>
        <van-icon name="location-o" />
      </template>
      <van-tab title="正在热映">正在热映</van-tab>
      <van-tab title="即将上映">即将上映</van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    handleClick (name) {
      // 点击某个tab栏也要改变查询参数
      this.$router.push({ name: 'movie', query: { id: name } })
    }
  },
  created () {
    // tab栏他直接接收数字的0和1，不能写字符串的0和1
    this.active = +this.$route.query.id
  }
}
</script>

<style>
</style>
